<%@page contentType="text/html" pageEncoding="UTF-8"
	import="java.awt.*,java.awt.font.*,java.awt.geom.*,java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/content/style.css" type="text/css" />
<style type="text/css">
span {
	font-size: 12px;
}
p {
	font-size: 12px;
	width: 100px;
}
</style>
<title>Font</title>
<script type="text/javascript">
	function update() {
		var vtr = document.getElementsByTagName("tr");
		for ( var i = 1; i < vtr.length; i++) {
			var vtd = vtr[i].getElementsByTagName("td");
			vtd[4].innerHTML = Math.round(vtd[5].getElementsByTagName("span")[0].scrollWidth) + " px";
		}
	}
</script>
</head>
<body onload="update()">
	<h3 id="heading" style="">Below fonts are available on the Server</h3>
	<table border="1">
		<tr>
			<th>Name</th>
			<th>Glyphs</th>
			<th title="text layout bound">Width</th>
			<th title="font string bound">Width</th>
			<th title="Javascript scroll width">Width</th>
			<th>Example</th>
			<th>CSS ellipsis</th>
		</tr>
		<%
			String str = "The quick brown fox jumps over the lazy dog.";
			FontRenderContext frc = new FontRenderContext(new AffineTransform(), true, true);
			for (Font f : GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts()) {
				f = f.deriveFont(12.0f);
				TextLayout layout = new TextLayout(str, f, frc);
				long w1 = Math.round(layout.getBounds().getWidth());
				long w2 = Math.round(f.getStringBounds(str, frc).getWidth());
				String style = "font-family:" + f.getFamily() + ";";
				if (!f.getName().equals(f.getFamily())) {
					if (f.getName().toLowerCase().contains("bold"))
						style = style + " font-weight: bold;";
					if (f.getName().toLowerCase().contains("italic"))
						style = style + " font-style: italic;";
					if (f.getName().toLowerCase().contains("oblique"))
						style = style + " font-style: oblique;";
				}
		%>
		<tr>
			<td><%=f.getName()%></td>
			<td><%=f.getNumGlyphs()%></td>
			<td><%=w1%> px</td>
			<td><%=w2%> px</td>
			<td>&nbsp;</td>
			<td><span style="<%=style%>"><%=str%></span></td>
			<td><p class="ellipsis" style="<%=style%>" title="<%=str%>"><%=str%></p></td>
		</tr>
		<%
			}
		%>
	</table>
</body>
</html>
